<template>
    <view class="swipe-banner" v-if="show">
        <swiper class="flex1" interval="5000" :indicator-dots="true" :autoplay="autoPlay" @change="swiperChange" :infinite="true" :forbid-slide-animation="true">
            <swiper-item class="flex1" v-for="(img, index) in bannerList" :key="index">
                <view class="flex1" @tap="countdown2home(true,true)">
                    <image class="flex1" mode="aspectFill" :style="{ width: screenWidth+ 'px' }" :src="img.src"/>
                </view>
            </swiper-item>
        </swiper>
        <view class="swiper-to-home" @click="countdown2home(true,false)" v-if="showSkip">
			<text class="swiper-to-home-text">跳过<text class="swiper-to-home-delay-second" v-if="delaySecond>0 && delaySecond<300">{{delaySecond}}s</text></text>
		</view>
    </view>
</template>

<script>
const SystemInfo = uni.getSystemInfoSync();

export default {
    data() {
        return {
            bannerList: [],
			tempList:[
				//引导图列表
				{src: '/static/guide-img2.jpg',swiper:true},
				{src: '/static/guide-img.jpg',swiper:true},
				//swiper=false为主图
			],
            autoPlay: false,
            currIndex: 0,
            screenWidth: SystemInfo.screenWidth,
			delaySecond: -1,//默认不自动进入
			showSkip:false,
			countdown:null,
			show:false
        }
    },
	onUnload() {
		clearInterval(this.countdown);//清除定时器
	},
	onLoad() {
		// onlyOne=true仅加载一次
		this.run(false);
	},
    methods: {
		run(onlyOne){
			var splash = false
			// var splash=uni.getStorageSync('LLNAPI-SPLASH');
			// if(this.tempList.length===0 || (splash && onlyOne)){
			// 	//如果已存在且仅一次直接跳过
			// 	uni.redirectTo({
			// 		url:'/pages/index/index'
			// 	})
				
			// 	return false;
			// }
			
			this.show=true;
			this.showSkip=true;
			if(this.tempList.length==1){
				this.bannerList=this.tempList;
				//只有一张时直接倒计时10秒
				this.delaySecond=10;
				this.autoPlay=false;
				
				//倒计时进入首页
				this.countdown2home(false);
			}else{
				if(!splash){
					this.bannerList=this.tempList.filter((x)=>{return x.swiper;});;
					this.autoPlay=true;
				}else{
					var masterBanner=[this.tempList[this.tempList.length-1]];	
					for (var i = 0; i < this.tempList.length; i++) {
						var item=this.tempList[i];
						if(!item.swiper){
							masterBanner=item;
							break;
						}
					}
					//引导图已经加载过了，只展示一张图片
					this.bannerList=[masterBanner];	
					
					//只有一张计时10秒
					this.delaySecond=10;
					this.autoPlay=false;
					this.countdown2home(false);
				}
			}
		},
        swiperChange:function(e) {
            this.currIndex = e.detail.current;
			if(this.bannerList.length == this.currIndex + 1){
				//最后一张暂停轮播
				this.autoPlay=false;
				this.delaySecond=10;
				
				if(this.countdown){
					this.showSkip=true;
					clearInterval(this.countdown);
				}
				//倒计时进入首页
				this.countdown2home(false);
			}else{
				console.log(this.delaySecond)
				if(this.countdown){
					if(this.delaySecond>3){
						this.delaySecond=100000;
						//停止倒计时
						clearInterval(this.countdown);
					}
				}else{
					this.delaySecond=100000;
				}
			}
        },
		countdown2home:function(direct,isLastBanner){
			var that=this;
			//手动进入
			if(direct){
				if(!isLastBanner || (this.bannerList.length == this.currIndex + 1)){
					if(this.countdown){
						this.showSkip=false;
						clearInterval(this.countdown);
					}
					uni.setStorage({
						key: 'LLNAPI-SPLASH',
						data: true,
						success() {
							uni.switchTab({
								url:'/pages/tabBar/home/index'
							})
						}
					});
				}
				return false;
			}
			if(this.delaySecond==-1){
				//不进入，由用户手动点击进入
				return false;
			}
			
			//倒计时进入首页
			this.countdown = setInterval(() => {
				if(that.delaySecond < 2){
					that.showSkip=false;
				}
				if (that.delaySecond > 300) {
					clearInterval(that.countdown);
				}
				if (that.delaySecond < 1) {
					clearInterval(that.countdown);
					uni.setStorage({
						key: 'LLNAPI-SPLASH',
						data: true,
						success() {
							uni.switchTab({
								url:'/pages/tabBar/home/index'
							})
						}
					});
					return;
				}
				that.delaySecond--;
			}, 1000);
		}
    }
};
</script>
<style scoped>
page {
    min-height: 100%;
    height: 100%;
}
.swipe-banner {
	display: flex;
	height: 100vh;
	display: flex;
	height: 100vh;
    flex-direction: column;
    flex: 1;
}

.flex1 {
    flex: 1;
	height: 100%;
}
.apptestnnnn {
    border-width: 1px;
    border-color: #4cd964;
    border-style: solid;
}
.apptest {
    border-width: 1px;
    border-color: #007aff;
    border-style: solid;
}
.swiper-to-home {
    position: absolute;
    z-index: 999;
    right: 40rpx;
    /* #ifndef MP */
    top: 80rpx;
    /* #endif */
    /* #ifdef MP */
    top: 150rpx;
    /* #endif */
}

.swiper-to-home-text {
    color: #ffffff;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    border-width: 1rpx;
    border-color: #ffffff;
    border-style: solid;
    border-radius: 30rpx;
    font-size: 28rpx;
    padding-top: 5rpx;
    padding-bottom: 5rpx;
    padding-left: 25rpx;
    padding-right: 25rpx;
}
.swiper-to-home-delay-second{
	padding-left: 6rpx;
	color: #56eeff;
}
.indicator {
    width: 714rpx;
    height: 30rpx;
    position: absolute;
    bottom: 50rpx;
    left: 1rpx;
    item-color: #f6f6f6;
    item-selected-color: #fd575c;
    item-size: 20rpx;
}
</style>
